 /*
 * @description: 客服系统/表情处理
 * @Author: along
 * @Date: 2020-09-29
 * @Last Modified by: along
 * @Last Modified time: 2002-10-15
 */
<template>
    <div :style="{top: '-232px'}" :class="show ? 'move emoticon' : 'emoticon'">
        <div
            v-for="(option,i) in emojiList"
            :key="i"
            class="emoticon-wrap"
            @click="change(option.alt)"
        >
            <img
                :src="url_prifix + option.url"
                class="emoticon-image"
            >
        </div>
    </div>
</template>

<script>
import { emojiList, url_prifix } from '@/assets/js/emoji.js';
export default {
    name: 'CustomEmoji',
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            h: 0,
            emojiList: emojiList,
            url_prifix: url_prifix
        };
    },
    methods: {
        /**
         * @description 选择表情
         */
        change (alt) {
            this.$emit('change', alt);
        }
    }
};
</script>

<style lang="less" scoped>
.emoticon {
    width: 472px;
    box-sizing: border-box;
    padding: 11px;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    z-index: 100;
    opacity: 0;
    transform: scale(0);
    cursor: pointer;
    transition: all .3s;
    .emoticon-wrap {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        &:hover {
            background: rgba(0, 0, 0, 0.16);
        }
    }
    .emoticon-image {
        width: 20px;
        height: 20px;
    }
}
.move {
    opacity: 1;
    transform: scale(1);
}
</style>